<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="keywords" content="">
<meta name="description" content="">
<title>用户管理</title>
<link href="../../web-frame/layui/css/layui.css" rel="stylesheet"/>
<link href="../../web-frame/ruoyi/css/bootstrap.min.css" rel="stylesheet"/>
<link href="../../web-frame/ruoyi/css/font-awesome.min.css" rel="stylesheet"/>
<!-- bootstrap-table 表格插件样式 -->
<link href="../../web-frame/ruoyi/libs/bootstrap-table/bootstrap-table.min.css?v=20201129" rel="stylesheet"/>
<link href="../../web-frame/ruoyi/css/animate.css" rel="stylesheet"/>
<link href="../../web-frame/ruoyi/css/style.css?v=20200903" rel="stylesheet"/>
<link href="../../web-frame/ruoyi/ruoyi/css/ry-ui.css?v=4.6.0" rel="stylesheet"/>
<script src="../../web-frame/ruoyi/js/jquery.min.js"></script>
<script src="../../web-frame/ruoyi/js/bootstrap.min.js"></script>
<!-- bootstrap-table 表格插件 -->
<script src="../../web-frame/ruoyi/libs/bootstrap-table/bootstrap-table.min.js?v=20201129"></script>
<script src="../../web-frame/ruoyi/libs/bootstrap-table/locale/bootstrap-table-zh-CN.min.js?v=20201129"></script>
<script src="../../web-frame/ruoyi/libs/bootstrap-table/extensions/mobile/bootstrap-table-mobile.min.js?v=20201129"></script>
<!-- jquery-validate 表单验证插件 -->
<script src="../../web-frame/ruoyi/libs/validate/jquery.validate.min.js"></script>
<script src="../../web-frame/ruoyi/libs/validate/messages_zh.min.js"></script>
<script src="../../web-frame/ruoyi/libs/validate/jquery.validate.extend.js"></script>
<!-- jquery-validate 表单树插件 -->
<script src="../../web-frame/ruoyi/libs/bootstrap-treetable/bootstrap-treetable.js"></script>
<!-- 遮罩层 -->
<script src="../../web-frame/ruoyi/libs/blockUI/jquery.blockUI.js"></script>
<script src="../../web-frame/ruoyi/libs/iCheck/icheck.min.js"></script>
<script src="../../web-frame/ruoyi/libs/layer/layer.min.js"></script>
<script src="../../web-frame/layui/layui.js"></script>
<script src="/web-frame/ruoyi/libs/layer/laytpl.js"></script>
<script src="/web-frame/ruoyi/libs/layer/form.js"></script>
<script src="../../web-frame/ruoyi/ruoyi/js/common.js?v=4.6.0"></script>
<script src="../../web-frame/ruoyi/ruoyi/js/ry-ui.js?v=4.6.0"></script>
<script src="/web-frame/element/js/axios.js"></script>
<script src="/web-frame/js/glob.js"></script>
<body>

<div class="container-div">
    <div class="row">
        <div class="col-sm-12 search-collapse">
            <form id="role-form">
                <div class="select-list">
                    <ul>
                        <li>
                            关键字查询：<input type="text" name="keyword"/>
                        </li>
                        <li>
                            <a class="btn btn-primary btn-rounded btn-sm" onclick="$.table.search()"><i class="fa fa-search"></i>&nbsp;搜索</a>
                            <a class="btn btn-warning btn-rounded btn-sm" onclick="$.form.reset()"><i class="fa fa-refresh"></i>&nbsp;重置</a>
                        </li>
                    </ul>
                </div>
            </form>
        </div>

        <div class="btn-group-sm" id="toolbar" role="group">
            <a class="btn btn-success" onclick="addMenu()">
                <i class="fa fa-plus"></i> 新增菜单
            </a>
        </div>

        <div class="col-sm-12 select-table table-striped">
            <table id="bootstrap-table"></table>
        </div>
    </div>
</div>

<script id="addMenu_id" type="text/html">
    <div style="padding: 5px">
        <form class="layui-form layui-form-pane" id="form-menu" action="">
            <div class="form-group">
                <div class="layui-form-item">
                    <label class="layui-form-label">菜单名称</label>
                    <div class="layui-input-block">
                        <input type="text" name="name"  autocomplete="off" placeholder="请输入目录名称"  class="layui-input" >
                    </div>
                </div>
                <div class="layui-form-item">
                    <label class="layui-form-label">权限名称</label>
                    <div class="layui-input-block">
                        <input type="text" name="permission"  autocomplete="off" placeholder="请输入权限名称"  class="layui-input" >
                    </div>
                </div>
                <div class="layui-form-item">
                    <label class="layui-form-label">图标选择</label>
                    <div class="layui-input-block">
                        <select name="icon" lay-filter="aihao">
                            <!--    模板的foreach循环                    -->
                            {{#  layui.each(d.icon.rows, function(index, item){ }}
                            <option value={{item.key}}>{{= item.value }}</option>
                            {{#  }); }}
                            <!--  单纯的if                        -->
                            {{#  if(d.icon.rows.length === 0){ }}
                            <option value=""> 无数据</option>
                            {{#  } }}
                        </select>
                    </div>
                </div>
                <div class="layui-form-item">
                    <label class="layui-form-label">目录选择</label>
                    <div class="layui-input-block">
                        <select name="dictory" lay-filter="aihao">
                            <!--    模板的foreach循环                    -->
                            {{#  layui.each(d.dictory.rows, function(index, item){ }}
                            <option value={{item.value}}>{{item.key}}</option>
                            {{#  }); }}
                            <!--  单纯的if                        -->
                            {{#  if(d.dictory.rows.length === 0){ }}
                            <option value=""> 无数据</option>
                            {{#  } }}

                        </select>
                    </div>
                </div>
                <div class="layui-form-item">
                    <label class="layui-form-label">菜单路径</label>
                    <div class="layui-input-block">
                        <input type="text" name="href"  autocomplete="off" placeholder="请输入目录菜单节点"  class="layui-input" >
                    </div>
                </div>
            </div>
        </form>
    </div>
</script>
<script id="updateMenu" type="text/html">
    <div style="padding: 5px">
        <form class="layui-form layui-form-pane" id="form-upadate-menu" action="">
            <input type="text" name="menuId" value={{d.data.menu_id}}    hidden >
            <div class="form-group">
                <div class="layui-form-item">
                    <label class="layui-form-label">菜单名称</label>
                    <div class="layui-input-block">
                        <input type="text" name="name" value={{d.data.name}}  autocomplete="off" placeholder="请输入菜单名称"  class="layui-input" >
                    </div>
                </div>
                <div class="layui-form-item">
                    <label class="layui-form-label">菜单权限</label>
                    <div class="layui-input-block">
                        <input type="text" name="permission"  value="{{d.data.permission}}" autocomplete="off" placeholder="请输入图标名称"  class="layui-input" >
                    </div>
                </div>
                <div class="layui-form-item">
                    <label class="layui-form-label">菜单地址</label>
                    <div class="layui-input-block">
                        <input type="text" name="menuUrl" value="{{d.data.menu_url}}"  autocomplete="off" placeholder="请输入菜单地址"  class="layui-input" >
                    </div>
                </div>
                <div class="layui-form-item">
                    <label class="layui-form-label">目录选择</label>
                    <div class="layui-input-block">
                        <select name="dictory" lay-filter="aihao">
                            {{#  if(d.data.dictoryid !== undefined){ }}
                            <option value={{d.data.dictoryid}}> {{d.data.dictryname}}</option>
                            {{#  } }}
                            <!--    模板的foreach循环                    -->
                            {{#  layui.each(d.menu, function(index, item){ }}
                            <option value={{item.value}}>{{item.key}}</option>
                            {{#  }); }}
                            <!--  单纯的if                        -->
                            {{#  if(d.menu.length === 0){ }}
                            <option value=""> 无数据</option>
                            {{#  } }}
                        </select>
                    </div>
                </div>
                <div class="layui-form-item">
                    <label class="layui-form-label">图标选择</label>
                    <div class="layui-input-block">
                        <select name="icon" lay-filter="aihao">
                            {{#  if(d.data.icon_id !== undefined){ }}
                            <option value={{d.data.icon_id}}> {{d.data.icon_name}}</option>
                            {{#  } }}
                            <!--    模板的foreach循环                    -->
                            {{#  layui.each(d.icon, function(index, item){ }}
                            <option value={{item.key}}>{{item.value}}</option>
                            {{#  }); }}
                            <!--  单纯的if                        -->
                            {{#  if(d.icon.length === 0){ }}
                            <option value=""> 无数据</option>
                            {{#  } }}
                        </select>
                    </div>
                </div>
            </div>
        </form>
    </div>
</script>
<script>

    $(function() {
        var options = {
            url: "/menu/sysmenulist",
            modalName: "菜单列表",
            columns: [{
                checkbox: true
            },
                {
                    title: '序号',
                    align: 'center',
                    halign: 'center',
                    width: 40,
                    formatter: function (value, row, index) {
                        //获取每页显示的数量
                        var pageSize=$('#bootstrap-table').bootstrapTable('getOptions').pageSize;
                        //获取当前是第几页
                        var pageNumber=$('#bootstrap-table').bootstrapTable('getOptions').pageNumber;
                        //返回序号，注意index是从0开始的，所以要加上1
                        return pageSize * (pageNumber - 1) + index + 1;
                    }
                },
                {
                    field: 'name',
                    title: '菜单名称'
                },
                {
                    field: 'permission',
                    title: '菜单权限'
                },
                {
                    field: 'menu_url',
                    title: '菜单地址'
                },
                {
                    field: 'dictoryName',
                    title: '菜单目录'
                },
                {
                    field: 'createDate',
                    title: '创建时间'
                },
                {
                    title: '操作',
                    width: '20',
                    widthUnit: '%',
                    align: "left",
                    formatter: function (value, row, index) {
                        var actions = [];
                        actions.push('<a class="btn btn-info btn-xs " href="javascript:void(0)" onclick="editData(\'' + row.menu_id + '\')">修改</a> ');
                        actions.push('<a class="btn btn-danger btn-xs " href="javascript:void(0)" onclick="removeData(\'' + row.menu_id + '\')">删除</a>');
                        return actions.join('');
                    }
                }
            ]
        };
        $.table.init(options);
    });

    var index_update
    //编辑数据
    function editData(id){
        var obj={};
        var dictory_data=urldata('post','/menu/dictoryList',undefined)
        var icon_data=urldata('post','/icon/iconList',undefined)
        var data=urldata('post','/menu/sysmenuOne/'+id,undefined);
        obj.data=data.rows;
        obj.menu=dictory_data.rows;
        obj.icon=icon_data.rows;
        console.log(obj)
        laytemplateupdateMenu(obj,'updateMenu')
        index_update=layer.open({
            content: $('#updateMenu').html()
            ,area: ['600px', '450px'] //自定义文本域宽高
            ,title:'菜单新增'
            ,btn: ['确定', '取消']
            ,yes: function(){
                submitUpdate();
            }
            ,btn2: function(){
                //按钮【取消】的回调
                return 0;
            }//用于layui表单重新渲染
            ,success: function(layero){
                layui.use('form', function(){
                    var form = layui.form;
                    form.render();
                });
            }
        });
    }
    //对应上面的
    var num_2=0
    var tplContent_updateMenu_1;
    function laytemplateupdateMenu(obj,id) {
        var laytpl = layui.laytpl;
        var id=document.getElementById(id);
        if(num_2===0){
            tplContent_updateMenu_1=id.innerHTML;
            num_2++;
        }
        var tpl=tplContent_updateMenu_1;
        laytpl(tpl).render(obj, function(html){
            id.innerHTML = html;
        });
    }

    //新增用户
    var index_addMenu
    function addMenu() {
        var data={};
        var dictory_data=urldata('post','/menu/dictoryList',undefined)
        var icon_data=urldata('post','/icon/iconList',undefined)
        data.dictory=dictory_data;
        data.icon=icon_data;
        laytemplateaddMenu(data,'addMenu_id')
        index_addMenu=layer.open({
            content: $('#addMenu_id').html()
            ,area: ['600px', '450px'] //自定义文本域宽高
            ,title:'菜单新增'
            ,btn: ['确定', '取消']
            ,yes: function(){
                submitOrder();
            }
            ,btn2: function(){
                //按钮【取消】的回调
                return 0;
            }//用于layui表单重新渲染
            ,success: function(layero){
                layui.use('form', function(){
                    var form = layui.form;
                    form.render();
                });
            }
        });
    }
    //对应上面的
    var num_1=0
    var tplContent_addMenu_1;
    function laytemplateaddMenu(obj,id) {
        var laytpl = layui.laytpl;
        var id=document.getElementById(id);
        if(num_1===0){
            tplContent_addMenu_1=id.innerHTML;
            num_1++;
        }
        var tpl=tplContent_addMenu_1;
        laytpl(tpl).render(obj, function(html){
            id.innerHTML = html;
        });
    }

    //新增目录
    var index_Dictory
    function addDictory(){
       // var data=urldata('post','/',undefined)
       // laytemplateUpdate_1(data,'addDictory_id')
        index_Dictory=layer.open({
            content: $('#addDictory_id').html()
            ,area: ['600px', '300px'] //自定义文本域宽高
            ,title:'添加目录'
            ,type: 1
            ,btn: ['确定', '取消']
            ,yes: function(){
                submitDicroty();
            }
            ,btn2: function(){
                //按钮【取消】的回调
                return 0;
            }
            //用于layui表单重新渲染
            ,success: function(layero){
                layui.use('form', function(){
                    var form = layui.form;
                    form.render();
                });
            }
        });
    }
    //新增目录菜单
    function submitDicroty() {
        var data= $("#form-dictory").serialize();
        data = decodeURIComponent(data,true);
        //会将弹窗的表单数据封装成json数据
        data=DataDeal.formToJson(data);
        alert(JSON.stringify(data))
      //  var data=urldata('post','/menu/addDcitory',data);
        if(data.code==0){
            layer.msg("添加成功");
            //关闭弹窗
            layer.close(index_add);
            $('#bootstrap-table').bootstrapTable(('refresh'));
        }
    }

    function removeData(obj) {
        layer.confirm('您确定要删除这条数据吗？', {
            btn: ['确定','取消'] //按钮
        }, function(index, layero){
            var data=urldata('post','/menu/deleteMenu/'+obj,undefined)
            if(data.code===0){
                layer.msg("移除成功");
                $('#bootstrap-table').bootstrapTable(('refresh'));
                layer.close(index)
            }
        })

    }

    function submitUpdate() {
        var data=$("#form-upadate-menu").serialize();
        data = decodeURIComponent(data,true);
        data=DataDeal.formToJson(data);
        var data=urldata('post','/menu/sysmenuupdate',data);
        if(data.code===0){
            layer.msg("修改成功");
            $('#bootstrap-table').bootstrapTable(('refresh'));
        }else {
            layer.msg("修改失败");
        }
        layer.close(index_update);
    }


    //确认
    function submitOrder() {
        var data= $("#form-menu").serialize();
        data = decodeURIComponent(data,true);
        data=DataDeal.formToJson(data);
        var data=urldata('post','/menu/addsystemMenu',data);
        if(data.code==0){
            layer.msg("添加成功");
            layer.close(index_addMenu);
        }
    }


    var DataDeal = {
        //将从form中通过$('#refer').serialize()获取的值转成json
        formToJson: function (data) {
            data=data.replace(/&/g,"\",\"");
            data=data.replace(/=/g,"\":\"");
            data="{\""+data+"\"}";
            return data;
        }
    };

</script>
</body>
</html>